<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>部门页面</title>
		<link rel="stylesheet" href="../res/layui/css/layui.css" media="all">
		<script src="../res/layui/layui.js"></script>
	</head>
	<style type="text/css">
		.layui-table td div {
			height: 80px;
		}
		
		.layui-table td div img {
			height: 80px;
			width: 80px;
		}
	</style>



	<body>
		

		
<form class="layui-form" action="" onsubmit="return false;" style="margin-top: 20px;">
		  
            
		    <button class="layui-btn" lay-submit lay-filter="formDemo" id="sousuo" style="display: none;">搜索</button>
		    
		    <button class="layui-btn layui-btn-danger" lay-submit lay-filter="delete">批量删除</button>
		    <button class="layui-btn" lay-submit lay-filter="add" id="add">加入购物车</button>
		
		</form>
		<table id="demo" lay-filter="test"></table>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">移除购物车</a>

			<!-- 这里同样支持 laytpl 语法，如： -->
			{{# if(d.auth > 2){ }}
			<a class="layui-btn layui-btn-mini" lay-event="check">审核</a>
			{{# } }}
		</script>

		<script>
			//添加form的弹窗索引
			var indexOfAddForm;
			//编辑form的弹窗索引
			var indexOfEditForm;
			layui.use(['table', 'layer', 'laydate', 'form'], function() {
				var table = layui.table;
				var layer = layui.layer;
				var form = layui.form;
				var laydate = layui.laydate;
				var $ = layui.$;

				//执行一个laydate实例
				laydate.render({
					elem: '#beginTime' //指定元素
				});
				laydate.render({
					elem: '#endTime' //指定元素
				});

				//执行渲染
				table.render({
					id: "idTest",
					elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
						,
					height: 550 //容器高度
						,
						method: 'post',
					contentType: "text/html;charset=UTF-8",
					page: true,
					url: "/g4/carproduct/selectall"
						//http://localhost:8080         /product?method=getByCondition&page=1&limit=10
						//http://localhost:8080/liufude/product?method=getByCondition
						,
					cols: [

						[ //标题栏
							{
								checkbox: true,
								width: 100
							},
							//templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
							{
								field: 'picUrl',
								title: '商品图片',
								align: 'center',
								width: 100,
								templet: '<div><img src="/Xm/{{d.picUrl}}" /></div>'

								
							},{
								field: 'pId',
								title: '商品ID',
								align: 'center',
								width: 100,
								
							},{
								field: 'pname',
								title: '商品名称',
								align: 'center',
								width: 200,
								
							},{
								field: 'size',
								title: '规格',
								align: 'center',
								width: 100,
								
							},
							{
								field: 'carCount',
								title: '数量',
								align: 'center',
								width: 100,
							},{
								fixed: 'right',
								width: 200,
								title: '操作',
								align: 'center',
								toolbar: '#barDemo'
							} //这里的toolbar值是模板元素的选择器
						]
					]
					//,…… //更多参数参考右侧目录：基本参数选项
				});
				form.on('submit(add)', function(data) {
					indexOfAddForm = layer.open({
						type: 2,
						content: "carproduct-add.html" //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
							,
						area: ['800px', '500px']
					});
					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值
					//var tr = obj.tr; //获得当前行 tr 的DOM对象

					if(layEvent === 'detail') { //查看
						//do somehing
					} else if(layEvent === 'del') { //删除
						layer.confirm('真的要移除购物车么', function(index) {
							var url = "/g4/carproduct/upd";
							var dt = {
									pdtId: data.pdtId
							}
							$.post(url, dt, function(res) {
								if(res.code == '0') {
									layer.msg('移除成功');
									obj.del();
								} else {
									layer.msg('移除失败');
								}
							}, 'json')

							layer.close(index);
							//向服务端发送删除指令
						});
					} 
				});
			});
		</script>

	</body>

</html>